<template>
  <div>
    <ZgDialog v-model="showInfo" title="查看详情" :showFooter="false">
      <a-empty v-if="obj===null"></a-empty>
      <div v-else>
        <a-form class="custom-form" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" >
          <a-form-item label="请求IP：">{{ obj.requestIp }}</a-form-item>
          <a-form-item label="操作模块：">{{ obj.opModule }}</a-form-item>
          <a-form-item label="操作名称：">{{ obj.opName }}</a-form-item>
          <a-form-item label="操作类型：">{{ obj.opType }}</a-form-item>
          <a-form-item label="浏览器：">{{ obj.browser }}</a-form-item>
          <a-form-item label="操作系统：">{{ obj.os }}</a-form-item>
          <a-form-item label="HTTP方法：">{{ obj.httpMethod }}</a-form-item>
          <a-form-item label="请求路径：">{{ obj.requestUri }}</a-form-item>
          <a-form-item label="类名：">{{ obj.className }}</a-form-item>
          <a-form-item label="方法名：">{{ obj.methodName }}</a-form-item>
          <a-form-item label="用户名：">{{ obj.username }}</a-form-item>
          <a-form-item label="TOKEN：">{{ obj.token }}</a-form-item>
          <a-form-item label="请求时间：">{{ obj.requestTime }}</a-form-item>
          <a-form-item label="请求参数：">{{ obj.requestParam }}</a-form-item>
          <a-form-item label="请求结果：">{{ obj.requestResult }}</a-form-item>
          <a-form-item label="异常信息：">{{ obj.expInfo }}</a-form-item>
          <a-form-item label="请求耗时：">{{ obj.spend }}毫秒</a-form-item>
          <a-form-item label="请求状态：">{{ obj.state }}</a-form-item>
        </a-form>
      </div>
    </ZgDialog>
    <ZgPage
      ref="page"
      title="系统日志管理"
      :scrollX="1600"
      :pageOpt="{
        showAddBtn:false,
        showConditionBtn:true,
        showUpdateBtn:false,
        conditionHeight:180
      }"
      @search="onSearch"
      @del="onDel"
      @searchWithCondition="onSearchWithCondition"
      @resetCondition="onResetCondition"
    >
      <template slot="columns">
        <a-table-column :width="100" dataIndex="opModule" title="所属模块"></a-table-column>
        <a-table-column :width="150" dataIndex="opName" title="操作名称">
          <template slot-scope="text,record">
            <a @click="toInfo(record)">{{ record.opName }}</a>
          </template>
        </a-table-column>
        <a-table-column :width="80" dataIndex="opType" title="操作类型"></a-table-column>
        <a-table-column :width="100" dataIndex="requestIp" title="请求ip"></a-table-column>
        <a-table-column :width="80" dataIndex="username" title="用户名"></a-table-column>
        <a-table-column :width="150" dataIndex="requestTime" title="请求时间"></a-table-column>
        <a-table-column :width="80" dataIndex="httpMethod" title="HTTP方法"></a-table-column>
        <a-table-column dataIndex="requestUri" title="请求路径"></a-table-column>
        <a-table-column :width="80" fixed="right" title="请求参数">
          <template slot-scope="text,record">
            <a-popover title="请求参数" placement="left" trigger="click">
              <div slot="content" class="w400 h200 scroll">
                <ZgJsonViewer :value="genJson(record.requestParam)"></ZgJsonViewer>
              </div>
              <a v-if="record.requestParam">查看</a>
            </a-popover>
          </template>
        </a-table-column>
        <a-table-column :width="80" fixed="right" title="请求耗时">
          <template slot-scope="text,record">
            {{ record.spend }}毫秒
          </template>
        </a-table-column>
        <a-table-column :width="80" fixed="right" dataIndex="state" title="请求状态">
          <template slot-scope="text,record">
            <a-tag v-if="record.state==='SUCCESS'" color="green">成功</a-tag>
            <a-tag v-if="record.state==='FAIL'" color="red">失败</a-tag>
          </template>
        </a-table-column>
        <a-table-column :width="80" fixed="right" title="请求结果">
          <template slot-scope="text,record">
            <a-popover title="请求结果" placement="left" trigger="click">
              <div slot="content" class="w400 h200 scroll">
                <ZgJsonViewer :value="JSON.parse(record.requestResult)"></ZgJsonViewer>
              </div>
              <a v-if="record.requestResult">查看</a>
            </a-popover>
          </template>
        </a-table-column>
        <a-table-column :width="80" fixed="right" dataIndex="expInfo" title="异常信息">
          <template slot-scope="text,record">
            <a-popover title="异常信息" placement="left" trigger="click">
              <div slot="content" class="error w400 h200 scroll">
                {{ record.expInfo }}
              </div>
              <a v-if="record.expInfo">查看</a>
            </a-popover>
          </template>
        </a-table-column>
      </template>
      <template slot="condition">
        <a-row>
          <a-col :span="6">
            <div class="flx pd5">
              <div class="w120 tar">所属模块：</div>
              <ZgInput class="flx-1" v-model="condition.opModule"></ZgInput>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="flx pd5">
              <div class="w120 tar">操作名称：</div>
              <ZgInput class="flx-1" v-model="condition.opName"></ZgInput>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="flx pd5">
              <div class="w120 tar">操作类型：</div>
              <ZgSelect class="flx-1" v-model="condition.opType" :options="opTypeArr"></ZgSelect>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="flx pd5">
              <div class="w120 tar">HTTP方法：</div>
              <ZgSelect class="flx-1" v-model="condition.httpMethod" :options="httpMethodArr"></ZgSelect>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="flx pd5">
              <div class="w120 tar">操作结果：</div>
              <ZgSelect class="flx-1" v-model="condition.state" :options="stateArr"></ZgSelect>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="flx pd5">
              <div class="w120 tar">请求路径：</div>
              <ZgInput class="flx-1" v-model="condition.requestUri"></ZgInput>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="flx pd5">
              <div class="w120 tar">操作用户：</div>
              <ZgInput class="flx-1" v-model="condition.username"></ZgInput>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="flx pd5">
              <div class="w120 tar">操作用户：</div>
              <ZgInput class="flx-1" v-model="condition.username"></ZgInput>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="flx pd5">
              <div class="w120 tar">开始日期：</div>
              <ZgDatePicker class="flx-1" v-model="condition.sdate"></ZgDatePicker>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="flx pd5">
              <div class="w120 tar">结束日期：</div>
              <ZgDatePicker class="flx-1" v-model="condition.edate"></ZgDatePicker>
            </div>
          </a-col>
        </a-row>
      </template>
    </ZgPage>
  </div>
</template>
<script>
import moment from 'moment'
const fmt = 'YYYY-MM-DD'
export default {
  data () {
    return {
      obj: null,
      showInfo: false,
      opTypeArr: [
        { value: 'ADD', label: '新增' },
        { value: 'UPDATE', label: '修改' },
        { value: 'DELETE', label: '删除' },
        { value: 'QUERY', label: '查询' },
        { value: 'UPLOAD', label: '上传' },
        { value: 'DOWNLOAD', label: '下载' },
        { value: 'LOGIN', label: '登录' },
        { value: 'LOGOUT', label: '注销' },
        { value: 'OTHER', label: '其他' }
      ],
      httpMethodArr: [
        { value: 'POST', label: 'POST' },
        { value: 'GET', label: 'GET' }
      ],
      stateArr: [
        { value: 'SUCCESS', label: '成功' },
        { value: 'FAIL', label: '失败' }
      ],
      condition: {
        opModule: '',
        opType: '',
        opName: '',
        httpMethod: '',
        state: '',
        username: '',
        requestUri: '',
        sdate: moment().format(fmt),
        edate: moment().format(fmt)
      }
    }
  },
  methods: {
    toInfo (record) {
      this.showInfo = true
      this.obj = record
    },
    genJson (str) {
      const json = JSON.parse(str)
      for (var k in json) {
        if (json[k] !== null) {
          json[k] = JSON.parse(json[k])
        }
      }
      return json
    },
    onSearch (param) {
      this.$http.get('/zg-system/log/page', param, data => {
        this.$refs.page.endSearch(
          {
            total: parseInt(data.total),
            list: data.records.map(t => {
              t.key = t.id
              return t
            })
          }
        )
      })
    },
    onSearchWithCondition (param) {
      this.$http.get('/zg-system/log/page', Object.assign({}, this.condition, param), data => {
        this.$refs.page.endSearch(
          {
            total: parseInt(data.total),
            list: data.records.map(t => {
              t.key = t.id
              return t
            })
          }
        )
      })
    },
    onResetCondition () {
      this.condition = {
        opModule: '',
        opType: '',
        opName: '',
        httpMethod: '',
        state: '',
        username: '',
        requestUri: '',
        sdate: moment().format(fmt),
        edate: moment().format(fmt)
      }
    },
    onDel (ids) {
      this.$http.post('/zg-system/log/del', ids, () => {
        this.$refs.page.search()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-form {
  ::v-deep .ant-form-item {
    margin-bottom: 0px;
  }
}
</style>
